<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
</head>
<body>
    <input type="file" name="" id="upload" multiple>
    <button onclick="uploadStart()">上传单个</button>
    <button onclick="uploadStart1()">上传多个</button>
    <button onclick="uploadStart2()">多文件表单字段</button>
    <script>
        function uploadStart() {
            const files = document.querySelector('#upload').files
            const formData = new FormData()
            formData.set('name', '光4')
            formData.set('age', '光4')
            formData.set('file', files[0])

            axios.post('http://localhost:3333/aaa', formData).then(res => {
                console.log(res)
            })
        }

        function uploadStart1() {
            const files = document.querySelector('#upload').files
            const formData = new FormData()
            formData.set('name', '光4')
            formData.set('age', '光4')
            Array.from(files).forEach((file) => {
                formData.append('bbb', file)
            })

            axios.post('http://localhost:3333/bbb', formData).then(res => {
                console.log(res)
            })
        }

        function uploadStart2() {
            const files = document.querySelector('#upload').files
            const formData = new FormData()
            formData.set('name', '光4')
            formData.set('age', '光4')
            formData.set('aaa', files[0])
            formData.set('bbb', files[1])
            formData.set('ccc', files[2])

            axios.post('http://localhost:3333/ccc', formData).then(res => {
                console.log(res)
            })
        }
    </script>
</body>
</html>
